<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悦音音乐 - 微信小程序</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            max-width: 480px;
            margin: 0 auto;
            position: relative;
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 60px 20px 30px;
            position: relative;
            overflow: hidden;
        }
        
        .app-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .app-name {
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ff9e7d;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-size: 20px;
        }
        
        .search-bar {
            background-color: rgba(255, 255, 255, 0.25);
            border-radius: 30px;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        
        .search-bar i {
            margin-right: 10px;
            opacity: 0.7;
        }
        
        /* 内容区域样式 */
        .main-content {
            flex: 1;
            overflow-y: auto;
            background-color: #fff;
            border-radius: 25px 25px 0 0;
            padding: 25px 20px;
            margin-top: -20px;
            position: relative;
            z-index: 10;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .section-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .more-link {
            font-size: 14px;
            color: #888;
            font-weight: normal;
        }
        
        /* 推荐歌单样式 */
        .playlist-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .playlist-card {
            cursor: pointer;
        }
        
        .playlist-img {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 10px;
            background-color: #f1f1f1;
            overflow: hidden;
            position: relative;
            margin-bottom: 8px;
        }
        
        .playlist-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .playlist-info {
            font-size: 13px;
            color: #555;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 排行榜样式 */
        .ranking-list {
            background: #f9fafc;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 30px;
        }
        
        .ranking-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .ranking-item:last-child {
            border-bottom: none;
        }
        
        .rank-number {
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 12px;
            font-size: 12px;
            font-weight: 600;
            color: #999;
        }
        
        .rank-number.top {
            background-color: #ff4757;
            color: white;
        }
        
        .song-info {
            flex: 1;
        }
        
        .song-title {
            font-size: 15px;
            margin-bottom: 4px;
        }
        
        .song-artist {
            font-size: 12px;
            color: #888;
        }
        
        .song-time {
            font-size: 12px;
            color: #999;
            margin-left: 10px;
        }
        
        /* 今日推荐样式 */
        .daily-recommend {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            height: 140px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .daily-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
            border-radius: 0 0 15px 15px;
        }
        
        .daily-title {
            font-size: 20px;
            margin-bottom: 5px;
            font-weight: 600;
        }
        
        .daily-desc {
            font-size: 13px;
            opacity: 0.9;
        }
        
        /* 视频页样式 */
        .video-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .video-card {
            background-color: #f9fafc;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .video-thumb {
            width: 100%;
            height: 120px;
            position: relative;
            background-color: #e1e1e1;
        }
        
        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff4757;
            font-size: 16px;
        }
        
        .video-info {
            padding: 10px;
        }
        
        .video-title {
            font-size: 14px;
            margin-bottom: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 38px;
        }
        
        .video-stats {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #888;
        }
        
        /* 个人页样式 */
        .profile-header {
            display: flex;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 15px;
            margin-bottom: 25px;
        }
        
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.3);
            margin-right: 20px;
            background-color: #ff9e7d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 35px;
        }
        
        .profile-info {
            flex: 1;
        }
        
        .profile-name {
            font-size: 22px;
            margin-bottom: 5px;
        }
        
        .profile-level {
            background-color: rgba(255,255,255,0.2);
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            display: inline-block;
        }
        
        .profile-stats {
            display: flex;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 25px;
            text-align: center;
        }
        
        .stat-item {
            flex: 1;
            padding: 15px 0;
        }
        
        .stat-value {
            font-size: 18px;
            font-weight: 600;
            color: #2575fc;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 13px;
            color: #888;
        }
        
        .menu-container {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
            padding: 0 15px;
            margin-bottom: 25px;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 18px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(37, 117, 252, 0.1);
            border-radius: 8px;
            color: #2575fc;
            margin-right: 15px;
            font-size: 14px;
        }
        
        .menu-text {
            flex: 1;
            font-size: 16px;
        }
        
        /* 底部导航栏 */
        .tab-bar {
            display: flex;
            background-color: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            height: 70px;
            padding: 5px 0;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 12px;
            cursor: pointer;
        }
        
        .tab-item i {
            font-size: 22px;
            margin-bottom: 5px;
        }
        
        .tab-item.active {
            color: #2575fc;
        }
        
        /* 播放控制条 */
        .player-bar {
            position: absolute;
            bottom: 70px;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            align-items: center;
            padding: 0 15px;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
        }
        
        .player-poster {
            width: 45px;
            height: 45px;
            border-radius: 8px;
            background-color: #eee;
            margin-right: 15px;
        }
        
        .player-info {
            flex: 1;
        }
        
        .player-song {
            font-size: 15px;
            margin-bottom: 3px;
        }
        
        .player-artist {
            font-size: 12px;
            color: #888;
        }
        
        .player-controls {
            display: flex;
            margin-left: 15px;
        }
        
        .player-controls i {
            font-size: 22px;
            color: #2575fc;
            margin: 0 10px;
        }
        
        /* 背景装饰元素 */
        .circle-deco {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
        }
        
        .deco-1 {
            width: 120px;
            height: 120px;
            top: 30px;
            right: -40px;
        }
        
        .deco-2 {
            width: 80px;
            height: 80px;
            top: 100px;
            left: -20px;
        }
        
        /* 页面切换动画 */
        .tab-content {
            animation: fadeIn 0.4s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="circle-deco deco-1"></div>
        <div class="circle-deco deco-2"></div>
        
        <div class="app-info">
            <div class="app-name">悦音音乐</div>
            <div class="user-info">
                <div class="user-avatar">
                    <i class="fas fa-user"></i>
                </div>
            </div>
        </div>
        
        <div class="search-bar">
            <i class="fas fa-search"></i>
            搜索歌曲、歌手或专辑
        </div>
    </div>
    
    <!-- 播放器控制条 -->
    <div class="player-bar">
        <div class="player-poster"></div>
        <div class="player-info">
            <div class="player-song">七里香</div>
            <div class="player-artist">周杰伦</div>
        </div>
        <div class="player-controls">
            <i class="fas fa-step-backward"></i>
            <i class="fas fa-play"></i>
            <i class="fas fa-step-forward"></i>
        </div>
    </div>
    
    <div class="main-content">
        <!-- 音乐页面 -->
        <div id="music-tab" class="tab-content active">
            <h2 class="section-title">今日推荐 <span class="more-link">查看更多 ></span></h2>
            <div class="daily-recommend" style="background: linear-gradient(45deg, #ff9e7d, #ff5a7f);">
                <div class="daily-content">
                    <div class="daily-title">夏末轻音乐</div>
                    <div class="daily-desc">舒缓节奏 · 夏日限定</div>
                </div>
            </div>
            
            <h2 class="section-title">发现歌单 <span class="more-link">更多 ></span></h2>
            <div class="playlist-container">
                <div class="playlist-card">
                    <div class="playlist-img">
                        <div style="background: linear-gradient(45deg, #ffc3a0, #ffafbd); width: 100%; height: 100%;"></div>
                    </div>
                    <div class="playlist-info">华语流行热歌榜</div>
                </div>
                <div class="playlist-card">
                    <div class="playlist-img">
                        <div style="background: linear-gradient(45deg, #a1c4fd, #c2e9fb); width: 100%; height: 100%;"></div>
                    </div>
                    <div class="playlist-info">轻松学习背景音</div>
                </div>
                <div class="playlist-card">
                    <div class="playlist-img">
                        <div style="background: linear-gradient(45deg, #f6d365, #fda085); width: 100%; height: 100%;"></div>
                    </div>
                    <div class="playlist-info">90后青春回忆</div>
                </div>
                <div class="playlist-card">
                    <div class="playlist-img">
                        <div style="background: linear-gradient(45deg, #84fab0, #8fd3f4); width: 100%; height: 100%;"></div>
                    </div>
                    <div class="playlist-info">深夜emo治愈系列</div>
                </div>
                <div class="playlist-card">
                    <div class="playlist-img">
                        <div style="background: linear-gradient(45deg, #d4fc79, #96e6a1); width: 100%; height: 100%;"></div>
                    </div>
                    <div class="playlist-info">运动健身必备</div>
                </div>
                <div class="playlist-card">
                    <div class="playlist-img">
                        <div style="background: linear-gradient(45deg, #a6c0fe, #f68084); width: 100%; height: 100%;"></div>
                    </div>
                    <div class="playlist-info">欧美节奏精选</div>
                </div>
            </div>
            
            <h2 class="section-title">热门排行榜</h2>
            <div class="ranking-list">
                <div class="ranking-item">
                    <div class="rank-number top">1</div>
                    <div class="song-info">
                        <div class="song-title">晴天</div>
                        <div class="song-artist">周杰伦</div>
                    </div>
                    <div class="song-time">04:29</div>
                </div>
                <div class="ranking-item">
                    <div class="rank-number top">2</div>
                    <div class="song-info">
                        <div class="song-title">起风了</div>
                        <div class="song-artist">买辣椒也用券</div>
                    </div>
                    <div class="song-time">05:25</div>
                </div>
                <div class="ranking-item">
                    <div class="rank-number top">3</div>
                    <div class="song-info">
                        <div class="song-title">稻香</div>
                        <div class="song-artist">周杰伦</div>
                    </div>
                    <div class="song-time">03:43</div>
                </div>
                <div class="ranking-item">
                    <div class="rank-number">4</div>
                    <div class="song-info">
                        <div class="song-title">夜曲</div>
                        <div class="song-artist">周杰伦</div>
                    </div>
                    <div class="song-time">03:46</div>
                </div>
                <div class="ranking-item">
                    <div class="rank-number">5</div>
                    <div class="song-info">
                        <div class="song-title">光年之外</div>
                        <div class="song-artist">G.E.M.邓紫棋</div>
                    </div>
                    <div class="song-time">03:59</div>
                </div>
            </div>
        </div>
        
        <!-- 视频页面 -->
        <div id="video-tab" class="tab-content">
            <h2 class="section-title">推荐视频</h2>
            <div class="video-grid">
                <div class="video-card">
                    <div class="video-thumb">
                        <div style="background: linear-gradient(45deg, #ff9966, #ff5e62); width: 100%; height: 100%;"></div>
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <div class="video-title">周杰伦《Mojito》官方MV</div>
                        <div class="video-stats">
                            <span><i class="fas fa-eye"></i> 2356万</span>
                            <span>04:58</span>
                        </div>
                    </div>
                </div>
                <div class="video-card">
                    <div class="video-thumb">
                        <div style="background: linear-gradient(45deg, #2193b0, #6dd5ed); width: 100%; height: 100%;"></div>
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <div class="video-title">邓紫棋《光年之外》深情现场版</div>
                        <div class="video-stats">
                            <span><i class="fas fa-eye"></i> 1892万</span>
                            <span>04:15</span>
                        </div>
                    </div>
                </div>
                <div class="video-card">
                    <div class="video-thumb">
                        <div style="background: linear-gradient(45deg, #cc2b5e, #753a88); width: 100%; height: 100%;"></div>
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <div class="video-title">林俊杰《可惜没如果》官方MV</div>
                        <div class="video-stats">
                            <span><i class="fas fa-eye"></i> 1678万</span>
                            <span>05:26</span>
                        </div>
                    </div>
                </div>
                <div class="video-card">
                    <div class="video-thumb">
                        <div style="background: linear-gradient(45deg, #42275a, #734b6d); width: 100%; height: 100%;"></div>
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <div class="video-title">陈奕迅《十年》经典演唱会现场</div>
                        <div class="video-stats">
                            <span><i class="fas fa-eye"></i> 2143万</span>
                            <span>04:20</span>
                        </div>
                    </div>
                </div>
                <div class="video-card">
                    <div class="video-thumb">
                        <div style="background: linear-gradient(45deg, #02aab0, #00cdac); width: 100%; height: 100%;"></div>
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <div class="video-title">五月天《突然好想你》MV</div>
                        <div class="video-stats">
                            <span><i class="fas fa-eye"></i> 1789万</span>
                            <span>04:32</span>
                        </div>
                    </div>
                </div>
                <div class="video-card">
                    <div class="video-thumb">
                        <div style="background: linear-gradient(45deg, #de6262, #ffb88c); width: 100%; height: 100%;"></div>
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>
                    <div class="video-info">
                        <div class="video-title">Taylor Swift《Love Story》MV</div>
                        <div class="video-stats">
                            <span><i class="fas fa-eye"></i> 3250万</span>
                            <span>03:55</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 个人页面 -->
        <div id="profile-tab" class="tab-content">
            <div class="profile-header">
                <div class="profile-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="profile-info">
                    <div class="profile-name">张小明</div>
                    <div class="profile-level">VIP会员</div>
                </div>
            </div>
            
            <div class="profile-stats">
                <div class="stat-item">
                    <div class="stat-value">127</div>
                    <div class="stat-label">喜欢</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">48</div>
                    <div class="stat-label">收藏</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">862</div>
                    <div class="stat-label">关注</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">98</div>
                    <div class="stat-label">粉丝</div>
                </div>
            </div>
            
            <div class="menu-container">
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="menu-text">我的喜欢</div>
                    <i class="fas fa-angle-right"></i>
                </div>
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-history"></i>
                    </div>
                    <div class="menu-text">播放历史</div>
                    <i class="fas fa-angle-right"></i>
                </div>
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-download"></i>
                    </div>
                    <div class="menu-text">本地与下载</div>
                    <i class="fas fa-angle-right"></i>
                </div>
            </div>
            
            <div class="menu-container">
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-headphones-alt"></i>
                    </div>
                    <div class="menu-text">音效设置</div>
                    <i class="fas fa-angle-right"></i>
                </div>
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-moon"></i>
                    </div>
                    <div class="menu-text">夜间模式</div>
                    <div class="toggle-switch">
                        <input type="checkbox" id="night-mode">
                        <label for="night-mode"></label>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="menu-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="menu-text">设置</div>
                    <i class="fas fa-angle-right"></i>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active" data-tab="music-tab">
            <i class="fas fa-music"></i>
            <span>音乐</span>
        </div>
        <div class="tab-item" data-tab="video-tab">
            <i class="fas fa-video"></i>
            <span>视频</span>
        </div>
        <div class="tab-item" data-tab="profile-tab">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </div>
    </div>
    
    <script>
        // Tab切换功能
        document.querySelectorAll('.tab-item').forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有active类
                document.querySelectorAll('.tab-item').forEach(item => {
                    item.classList.remove('active');
                });
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                
                // 添加当前active类
                this.classList.add('active');
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // 添加点击效果
        document.querySelectorAll('.menu-item, .playlist-card, .video-card, .ranking-item').forEach(item => {
            item.addEventListener('click', function() {
                this.style.transform = 'scale(0.97)';
                this.style.transition = 'transform 0.2s';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 200);
            });
        });
    </script>
</body>
</html>